<template>
    <div class="app_box">
        <video
            :src="store.img_src"
            autoplay
            muted
            loop></video>
        <div class="index_box">
            <div class="header">
                <ul class="nav_ul">
                    <template
                        v-for="item in navArr"
                        :key="item.name">
                        <li
                            v-if="
                                item.permission &
                                store.user_info.user_permissions
                            "
                            @click="nav_switch(item.name)"
                            :class="{
                                bgc_highlight: nav_highlight == item.name,
                            }">
                            {{ item.title }}
                        </li>
                    </template>
                </ul>
                <ul class="btn_ul">
                    <li>
                        <div>
                            <img
                                :src="avatar"
                                class="img" />
                            <div>{{ store.user_info.user_name }}</div>
                        </div>
                    </li>
                    <li v-if="store.user_info.user_id">
                        <div
                            class="log_out"
                            @click="log_out">
                            👈退出登录
                        </div>
                    </li>
                    <li v-if="!store.user_info.user_id">
                        <div
                            class="btn"
                            @click="login_register('login')">
                            登录
                        </div>
                    </li>
                    <li v-if="!store.user_info.user_id">
                        <div
                            class="btn"
                            @click="login_register('register')">
                            注册
                        </div>
                    </li>
                </ul>
            </div>
            <div class="body" :key="componentKey">
                <keep-alive>
                <component
                    class="component"
                    :is="component"
                    ></component>
                </keep-alive>
                <div class="copyright">©青木川川川川</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, shallowRef, defineAsyncComponent } from 'vue';
// import Home from '@/components/index/home/index.vue'
// import Message from '@/components/index/message/index.vue'
// import Release from '@/components/index/release/index.vue'
// import Class from '@/components/index/class/index.vue'
// import My from '@/components/index/my/index.vue'
import router from '@/router/index';
import { useIndexStore } from '@/store/model';
import { delete_cookie } from '@/axios/home';
import { generate_strings_of_any_length } from '@/utils/utils.js';

const Home = defineAsyncComponent(() =>
    import('@/components/index/home/index.vue')
);
const Message = defineAsyncComponent(() =>
    import('@/components/index/message/index.vue')
);
const Release = defineAsyncComponent(() =>
    import('@/components/index/release/index.vue')
);
const Class = defineAsyncComponent(() =>
    import('@/components/index/class/index.vue')
);
const My = defineAsyncComponent(() =>
    import('@/components/index/my/index.vue')
);
const store = useIndexStore();
const component = shallowRef(Home);
const navArr = [
    {
        title: '首页',
        name: 'home',
        permission: 0b001,
    },
    {
        title: '分类',
        name: 'class',
        permission: 0b001,
    },
    {
        title: '留言',
        name: 'message',
        permission: 0b001,
    },
    {
        title: '发布',
        name: 'release',
        permission: 0b100,
    },
    {
        title: '我的',
        name: 'my',
        permission: 0b001,
    },
];
const nav_highlight = ref('home');
const avatar = ref(store.user_info.user_img);
const componentKey = ref(`${crypto.randomUUID()}`);

const nav_switch = (name) => {
    nav_highlight.value = name;
    switch (name) {
        case 'home':
            component.value = Home;
            break;
        case 'release':
            component.value = Release;
            break;
        case 'message':
            component.value = Message;
            break;
        case 'class':
            component.value = Class;
            break;
        case 'my':
            component.value = My;
            break;
    }
};
const login_register = (value) => {
    router.push(`/admin/${value}`);
};
const log_out = async () => {
    await delete_cookie();
    componentKey.value = crypto.randomUUID();
    store.update_user_info({
        user_name: `用户-${generate_strings_of_any_length(6)}`,
        user_img: `${store.web_url.webPath}/img/default/mrtx.webp`,
        user_permissions: 0b001,
        user_id: null,
    });
};
</script>

<style lang="less" scoped>
.app_box {
    width: 100%;
    height: 100%;

    video {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 1;
        object-fit: cover;
        object-position: center;
    }

    .index_box {
        width: 19.2rem;
        height: 100vh;
        position: relative;
        z-index: 2;

        .header {
            height: 0.8rem;
            width: 19.2rem;
            background-color: @bs;
            position: fixed;
            z-index: 3;
            display: flex;
            justify-content: space-between;

            .nav_ul {
                padding: 0 0 0 3rem;
                height: 100%;
                display: flex;

                li {
                    width: 1rem;
                    text-align: center;
                    line-height: 0.8rem;
                    font-size: 0.2rem;
                    font-weight: 800;
                    color: @ls;
                }

                li:hover {
                    background-color: @tml;
                    cursor: pointer;
                }

                .bgc_highlight {
                    background-color: @tml;
                }
            }

            .btn_ul {
                padding: 0 1rem 0 0;
                height: 100%;
                display: flex;

                li {
                    width: 1.2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 0.16rem;

                    .btn {
                        // box-sizing: border-box;
                        width: 0.84rem;
                        height: 0.34rem;
                        border: @zborder solid @tml;
                        border-radius: @zyj;
                        text-align: center;
                        line-height: 0.34rem;
                        font-size: 0.16rem;
                        font-weight: 900;
                        color: @ls;
                    }

                    .btn:hover {
                        background-color: @tml;
                        cursor: pointer;
                    }

                    .img {
                        height: 0.6rem;
                        width: 0.6rem;
                        border-radius: 50%;
                    }

                    .log_out {
                        width: 100%;
                        text-align: center;
                        line-height: 0.8rem;
                        font-size: 0.16rem;
                        font-weight: 900;
                        color: @ls;
                    }

                    .log_out:hover {
                        cursor: pointer;
                        background-color: @tml;
                    }
                }

                li:nth-of-type(1) {
                    div {
                        width: 100%;
                        text-align: center;
                        color: @ls;
                        font-weight: 900;
                        /* 确保文本不会换行 */
                        white-space: nowrap;
                        /* 隐藏溢出的内容 */
                        overflow: hidden;
                        /* 将溢出的内容显示为省略号 */
                        text-overflow: ellipsis;
                    }
                }
            }
        }

        .body {
            width: 19.2rem;
            position: relative;
            z-index: 2;
            top: 1.2rem;
            min-height: calc(100vh - 1.2rem);
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .component {
                width: 15.2rem;
                flex: 0 0 auto;
                margin-left: 3rem;
            }

            .copyright {
                flex: 0 0 auto;
                width: 100vw;
                height: 0.4rem;
                color: @bs;
                text-align: center;
                line-height: 0.4rem;
                font-size: 0.12rem;
            }
        }
    }
}
</style>
